<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./elementplus/index.css" />
    <script src="./elementplus/vue.global.prod.js"></script>
    <script src="./elementplus/index.full.js"></script>
    <script src="./elementplus/index.iife.min.js"></script>
</head>
<body>
    <div id="app">
        <el-icon :size="size" :color="color">
            <Edit></Edit>
        </el-icon>
        <hr>
        <Edit width="30px" :color="color" ></Edit>
        <hr>
        <input type="color" @change="color = $event.target.value" >
        <hr>
        <el-slider style="width: 330px;" v-model="size" show-input :min="20" :max="200" ></el-slider>

        <hr>
        <h3>star={{star}}</h3>
        <el-rate v-model="star" clearable size="large" ></el-rate>
    </div>
    <script>
        const { createApp } = Vue;
        let app = createApp({
            data() {
                return {
                    size: 30,
                    color: 'red',
                    star: 0,
                }
            },
            methods: {
                
            }
        });
        app.use(ElementPlus);
        // Icon
        for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
            app.component(key, component);
        }
        app.mount('#app');
    </script>
</body>
</html>